<script setup>
import { ref } from 'vue';

const filters = ref([
  { label: '求职类型', options: ['全职', '兼职', '实习'] },
  { label: '薪资范围', options: ['3K-5K', '5K-10K', '10K-20K'] },
  { label: '工作经验', options: ['应届生', '1-3年', '3-5年'] },
  { label: '学历要求', options: ['大专', '本科', '硕士'] },
  { label: '公司类型', options: ['外企', '国企', '私企'] },
  { label: '公司规模', options: ['小型', '中型', '大型'] },
]);

const removeKeyword = (tag) => {
  console.log('Remove tag:', tag);
};

const addKeyword = () => {
  console.log('Add new keyword');
};

const onFilterChange = (value) => {
  console.log('Filter changed:', value);
};

const clearFilters = () => {
  console.log('Clear filters');
};

const applyFilters = () => {
  console.log('Apply filters');
};
</script>


<template>
  <div class="filter-bar">
    <div class="filter-keywords">
      <span class="filter-title">推荐职位</span>
      <a-tag closable @close="removeKeyword">java</a-tag>
      <a-tag closable @close="removeKeyword">机器学习</a-tag>
      <a-button type="link" @click="addKeyword">+ 添加求职期望</a-button>
    </div>
    <a-divider />
    <div class="filter-options">
      <a-select v-for="(filter, index) in filters" :key="index" placeholder="请选择" @change="onFilterChange">
        <a-select-option v-for="(option, index) in filter.options" :key="index" :value="option" :style="selectOption">
          {{ option }}
        </a-select-option>
      </a-select>
      <a-button type="link" @click="clearFilters">清空</a-button>
      <a-button type="primary" icon="filter" @click="applyFilters">筛选</a-button>
    </div>
  </div>
</template>

<style scoped>
.filter-bar {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #eaeaea;
  border-radius: 8px;
}

.filter-keywords {
  display: flex;
  align-items: center;
}

.filter-title {
  font-size: 18px;
  font-weight: bold;
  margin-right: 10px;
}

.filter-options {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  align-items: center;
}

.ant-select-single{
  min-width: 90px;
  margin: 0 5px;
}
</style>
